<template>
	<view class="wrap">
		<!-- 	
		<u-navbar style="font-weight: bold;" title="视频" :is-back="false" v-if="this.showIcon">
			<view class="slot-wrap">
				<u-icon size="50" name="home" ></u-icon>
			</view>
		</u-navbar> -->

		<scroll-view class="scroll-list" scroll-y="true">
			<view class="video">
				<!-- <video style="width:100%" v-if="showVideo" ref="videoPlayer" muted controls autoplay
					:src="selectedResource"></video> -->
				<video style="width:100%" v-if="showVideo" ref="videoPlayer" muted controls autoplay
					src="http://222.134.15.58:83/openUrl/NSxHKr6/live.m3u8"></video>
			</view>

			<!-- <view class="video">
			<video v-else="showVideo" ref="videoPlayer" muted controls autoplay :src="selectedResource"></video>
		</view> -->

			<view class="resource-selector">
				<view v-for="(item, index) in resources" :key="index" class="resource-item"
					:class="{ active: selectedIndex === index }" @click="selectResource(index)">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showVideo: true,
				dp: {},
				selectedIndex: 0,
				refreshdata: 0,
				selectedResource: "",
				resources: [{
						name: '资源1',
						url: 'http://222.134.15.58:83/openUrl/nINtkfC/live.m3u8'
					},
					{
						name: '资源2',
						url: 'http://220.161.87.62:8800/hls/1/index.m3u8'
					},
					{
						name: '资源3',
						url: 'http://220.161.87.62:8800/hls/0/index.m3u8'
					},
					{
						name: '资源3',
						url: 'http://220.161.87.62:8800/hls/0/index.m3u8'
					},
					{
						name: '资源3',
						url: 'http://220.161.87.62:8800/hls/0/index.m3u8'
					}
				]
			}
		},

		watch: {
			refreshData(oldValue, newValue) {
				this.$nextTick(() => {
					this.showVideo = true;
				});
			}
		},
		onLoad() {
			this.getVideo()
			setTimeout(() => {
				this.selectResource(this.selectedIndex);
			}, 1000); // 在此处设置你期望的延迟时间，单位为毫秒
		},
		methods: {
			selectResource(index) {
				this.selectedIndex = index;
				const selectedUrl = this.resources[index].url;
				this.$u.api.getVideoUrl({
						"code": selectedUrl
					})
					.then(res => {
						console.log(res.data.url,'eeeeeeeeeeeeeeeeeeeeeeeeeeeee')
						const videoUrl = res.data.url.replace("10.5.7.149", "222.134.15.58");
						this.selectedResource = videoUrl;
					})
					.catch(error => {
						// vm.$u.toast('未连接到服务器')
						console.error("Failed to get video URL:", error);
					});
				this.$nextTick(() => {
					setTimeout(() => {
						this.showVideo = !this.showVideo;
					}, 0);
				});
				setTimeout(() => {
					this.refresh()
				}, 500);

			},
			refresh() {
				this.showVideo = !this.showVideo;
			},
			getVideo() {
				this.$u.api.getVideo({
					"algorithmProcessId": "getVideo",
					"param": {
						"data": {
							// structure_uuid: this.searchData||  uni.getStorageSync('id');
							organ_uuidfc: uni.getStorageSync('organId')
						}
					}
				}).then(res => {
					this.resources = res.data.data.result.map(item => {
						return {
							name: item.video_name,
							url: item.video_description
						}
					})
					console.log(this.resources, "this.resources")
				})

			},



		}
	}
</script>
<style scoped lang="scss">
	@import '../../../common/uni.css';


	.page {
		background-color: #f5f5f5;
	}

	.wrap {
		width: 100%;
		height: 100vh;
		/* 设置为 100% 视口高度 */
		background-color: #f5f5f5 !important;

		.video {
			padding: 64rpx 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.scroll-list {
			height: 100vh;
			background-color: #f5f5f5;
		}
	}


	.resource-selector {
		display: flex;
		padding: 48rpx;
		align-items: center;
		flex-wrap: wrap;
	}

	.resource-item {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 0 0 30%;
		max-width: 33.333%;
		box-sizing: border-box;
		text-align: center;
		padding: 24rpx;
		cursor: pointer;
		background-color: #fff;
		margin: 10rpx;
		border-radius: 25rpx;
	}

	.resource-item.active {
		background-color: #ccc;
	}

	.video-play {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
	}
</style>